<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Avenger Admin Theme</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="description" content="Avenger Admin Theme">
    <meta name="author" content="KaijuThemes">

    <link href='http://fonts.googleapis.com/css?family=RobotoDraft:300,400,400italic,500,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600,700' rel='stylesheet' type='text/css'>

    <!--[if lt IE 10]>
        <script src="assets/js/media.match.min.js"></script>
        <script src="assets/js/placeholder.min.js"></script>
    <![endif]-->

    <link href="assets/fonts/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet">        <!-- Font Awesome -->
    <link href="assets/css/styles.css" type="text/css" rel="stylesheet">                                     <!-- Core CSS with all styles -->

    <link href="assets/plugins/jstree/dist/themes/avenger/style.min.css" type="text/css" rel="stylesheet">    <!-- jsTree -->
    <link href="assets/plugins/codeprettifier/prettify.css" type="text/css" rel="stylesheet">                <!-- Code Prettifier -->
    <link href="assets/plugins/iCheck/skins/minimal/blue.css" type="text/css" rel="stylesheet">              <!-- iCheck -->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries. Placeholdr.js enables the placeholder attribute -->
    <!--[if lt IE 9]>
        <link href="assets/css/ie8.css" type="text/css" rel="stylesheet">
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
        <script type="text/javascript" src="assets/plugins/charts-flot/excanvas.min.js"></script>
        <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->


    <body class="infobar-overlay sidebar-hideon-collpase sidebar-scroll">
        
        <div id="headerbar">
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-6 col-sm-2">
				<a href="#" class="shortcut-tile tile-brown">
					<div class="tile-body">
						<div class="pull-left"><i class="fa fa-pencil"></i></div>
					</div>
					<div class="tile-footer">
						Create Post
					</div>
				</a>
			</div>
			<div class="col-xs-6 col-sm-2">
				<a href="#" class="shortcut-tile tile-grape">
					<div class="tile-body">
						<div class="pull-left"><i class="fa fa-group"></i></div>
						<div class="pull-right"><span class="badge">2</span></div>
					</div>
					<div class="tile-footer">
						Contacts
					</div>
				</a>
			</div>
			<div class="col-xs-6 col-sm-2">
				<a href="#" class="shortcut-tile tile-primary">
					<div class="tile-body">
						<div class="pull-left"><i class="fa fa-envelope-o"></i></div>
						<div class="pull-right"><span class="badge">10</span></div>
					</div>
					<div class="tile-footer">
						Messages
					</div>
				</a>
			</div>
			<div class="col-xs-6 col-sm-2">
				<a href="#" class="shortcut-tile tile-inverse">
					<div class="tile-body">
						<div class="pull-left"><i class="fa fa-camera"></i></div>
						<div class="pull-right"><span class="badge">3</span></div>
					</div>
					<div class="tile-footer">
						Gallery
					</div>
				</a>
			</div>

			<div class="col-xs-6 col-sm-2">
				<a href="#" class="shortcut-tile tile-midnightblue">
					<div class="tile-body">
						<div class="pull-left"><i class="fa fa-cog"></i></div>
					</div>
					<div class="tile-footer">
						Settings
					</div>
				</a>
			</div>
			<div class="col-xs-6 col-sm-2">
				<a href="#" class="shortcut-tile tile-orange">
					<div class="tile-body">
						<div class="pull-left"><i class="fa fa-wrench"></i></div>
					</div>
					<div class="tile-footer">
						Plugins
					</div>
				</a>
			</div>
		</div>
	</div>
</div>
        <header id="topnav" class="navbar navbar-midnightblue navbar-fixed-top clearfix" role="banner">

	<span id="trigger-sidebar" class="toolbar-trigger toolbar-icon-bg">
		<a data-toggle="tooltips" data-placement="right" title="Toggle Sidebar"><span class="icon-bg"><i class="fa fa-fw fa-bars"></i></span></a>
	</span>

	<a class="navbar-brand" href="index.html">Avenger</a>

	<span id="trigger-infobar" class="toolbar-trigger toolbar-icon-bg">
		<a data-toggle="tooltips" data-placement="left" title="Toggle Infobar"><span class="icon-bg"><i class="fa fa-fw fa-bars"></i></span></a>
	</span>
	
	
	<div class="yamm navbar-left navbar-collapse collapse in">
		<ul class="nav navbar-nav">
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">Megamenu<span class="caret"></span></a>
				<ul class="dropdown-menu" style="width: 900px;">
					<li>
						<div class="yamm-content container-sm-height">
							<div class="row row-sm-height yamm-col-bordered">
								<div class="col-sm-3 col-sm-height yamm-col">
                                            
                                    <h3 class="yamm-category">Sidebar</h3>
                                    <ul class="list-unstyled mb20">
                                        <li><a href="layout-fixed-sidebars.html">Stretch Sidebars</a></li>
                                        <li><a href="layout-sidebar-scroll.html">Scroll Sidebar</a></li>
                                        <li><a href="layout-static-leftbar.html">Static Sidebar</a></li>
                                        <li><a href="layout-leftbar-widgets.html">Sidebar Widgets</a></li>   
                                    </ul>

                                    <h3 class="yamm-category">Infobar</h3>
                                    <ul class="list-unstyled">
                                        <li><a href="layout-infobar-offcanvas.html">Offcanvas Infobar</a></li>
                                        <li><a href="layout-infobar-overlay.html">Overlay Infobar</a></li>
                                        <li><a href="layout-chatbar-overlay.html">Chatbar</a></li>
                                        <li><a href="layout-rightbar-widgets.html">Infobar Widgets</a></li>   
                                    </ul>
                                    
                                </div>
                                <div class="col-sm-3 col-sm-height yamm-col">
                                    
                                    <h3 class="yamm-category">Page Content</h3>
                                    <ul class="list-unstyled mb20">
                                        <li><a href="layout-breadcrumb-top.html">Breadcrumbs on Top</a></li>
                                        <li><a href="layout-page-tabs.html">Page Tabs</a></li>
                                        <li><a href="layout-fullheight-panel.html">Full-Height Panel</a></li>
                                        <li><a href="layout-fullheight-content.html">Full-Height Content</a></li>
                                    </ul>

                                    <h3 class="yamm-category">Misc</h3>
                                    <ul class="list-unstyled">
                                    	<li><a href="layout-topnav-options.html">Topnav Options</a></li>
                                        <li><a href="layout-horizontal-small.html">Horizontal Small</a></li>
                                        <li><a href="layout-horizontal-large.html">Horizontal Large</a></li>
                                        <li><a href="layout-boxed.html">Boxed</a></li>
                                    </ul>
                                    
                                </div>
                                <div class="col-sm-3 col-sm-height yamm-col">
                                    
                                    <h3 class="yamm-category">Analytics</h3>
                                    <ul class="list-unstyled mb20">
                                        <li><a href="charts-flot.html">Flot</a></li>
                                        <li><a href="charts-sparklines.html">Sparklines</a></li>
                                        <li><a href="charts-morris.html">Morris</a></li>
                                        <li><a href="charts-easypiechart.html">Easy Pie Charts</a></li>
                                    </ul>

                                    <h3 class="yamm-category">Components</h3>
                                    <ul class="list-unstyled">
                                        <li><a href="ui-tiles.html">Tiles</a></li>
                                        <li><a href="custom-knob.html">jQuery Knob</a></li>
                                        <li><a href="custom-jqueryui.html">jQuery Slider</a></li>
                                        <li><a href="custom-ionrange.html">Ion Range Slider</a></li>
                                    </ul>
                                    
                                </div>
                                <div class="col-sm-3 col-sm-height yamm-col">
                                	<h3 class="yamm-category">Rem</h3>
                                    <img src="assets/demo/stockphoto/communication_12_carousel.jpg" class="mb20 img-responsive" style="width: 100%;">
                                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. totam rem aperiam eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                                </div>
							</div>
						</div>
					</li>
				</ul>
			</li>
			<li class="dropdown" id="widget-classicmenu">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
			<li><a href="" target="_blank">Link</a></li>
			<li><a href="" target="_blank">Another Link</a></li>
		</ul>
	</div>

	<ul class="nav navbar-nav toolbar pull-right">
		<li class="dropdown toolbar-icon-bg">
			<a href="#" id="navbar-links-toggle" data-toggle="collapse" data-target="header>.navbar-collapse">
				<span class="icon-bg">
					<i class="fa fa-fw fa-ellipsis-h"></i>
				</span>
			</a>
		</li>

		<li class="dropdown toolbar-icon-bg demo-search-hidden">
			<a href="#" class="dropdown-toggle tooltips" data-toggle="dropdown"><span class="icon-bg"><i class="fa fa-fw fa-search"></i></span></a>
			
			<div class="dropdown-menu dropdown-alternate arrow search dropdown-menu-form">
				<div class="dd-header">
					<span>Search</span>
					<span><a href="#">Advanced search</a></span>
				</div>
				<div class="input-group">
					<input type="text" class="form-control" placeholder="">
					
					<span class="input-group-btn">
						
						<a class="btn btn-primary" href="#">Search</a>
					</span>
				</div>
			</div>
		</li>

		<li class="toolbar-icon-bg demo-headerdrop-hidden">
            <a href="#" id="headerbardropdown"><span class="icon-bg"><i class="fa fa-fw fa-level-down"></i></span></i></a>
        </li>

        <li class="toolbar-icon-bg hidden-xs" id="trigger-fullscreen">
            <a href="#" class="toggle-fullscreen"><span class="icon-bg"><i class="fa fa-fw fa-arrows-alt"></i></span></i></a>
        </li>

		
		<li class="dropdown toolbar-icon-bg">
			<a href="#" class="hasnotifications dropdown-toggle" data-toggle='dropdown'><span class="icon-bg"><i class="fa fa-fw fa-bell"></i></span><span class="badge badge-info">5</span></a>
			<div class="dropdown-menu dropdown-alternate notifications arrow">
				<div class="dd-header">
					<span>Notifications</span>
					<span><a href="#">Settings</a></span>
				</div>
				<div class="scrollthis scroll-pane">
					<ul class="scroll-content">

						<li class="">
							<a href="#" class="notification-info">
								<div class="notification-icon"><i class="fa fa-user fa-fw"></i></div>
								<div class="notification-content">Profile Page has been updated</div>
								<div class="notification-time">2m</div>
							</a>
						</li>
						<li class="">
							<a href="#" class="notification-success">
								<div class="notification-icon"><i class="fa fa-check fa-fw"></i></div>
								<div class="notification-content">Updates pushed successfully</div>
								<div class="notification-time">12m</div>
							</a>
						</li>
						<li class="">
							<a href="#" class="notification-primary">
								<div class="notification-icon"><i class="fa fa-users fa-fw"></i></div>
								<div class="notification-content">New users request to join</div>
								<div class="notification-time">35m</div>
							</a>
						</li>
						<li class="">
							<a href="#" class="notification-danger">
								<div class="notification-icon"><i class="fa fa-shopping-cart fa-fw"></i></div>
								<div class="notification-content">More orders are pending</div>
								<div class="notification-time">11h</div>
							</a>
						</li>
						<li class="">
							<a href="#" class="notification-primary">
								<div class="notification-icon"><i class="fa fa-arrow-up fa-fw"></i></div>
								<div class="notification-content">Pending Membership approval</div>
								<div class="notification-time">2d</div>
							</a>
						</li>
						<li class="">
							<a href="#" class="notification-info">
								<div class="notification-icon"><i class="fa fa-check fa-fw"></i></div>
								<div class="notification-content">Succesfully updated to version 1.0.1</div>
								<div class="notification-time">40m</div>
							</a>
						</li>
					</ul>
				</div>
				<div class="dd-footer">
					<a href="#">View all notifications</a>
				</div>
			</div>
		</li>

		<li class="dropdown toolbar-icon-bg hidden-xs">
			<a href="#" class="hasnotifications dropdown-toggle" data-toggle='dropdown'><span class="icon-bg"><i class="fa fa-fw fa-envelope"></i></span></a>
			<div class="dropdown-menu dropdown-alternate messages arrow">
				<div class="dd-header">
					<span>Messages</span>
					<span><a href="#">Settings</a></span>
				</div>

				<div class="scrollthis scroll-pane">
					<ul class="scroll-content">
						<li class="">
							<a href="#">
								<img class="msg-avatar" src="assets/demo/avatar/avatar_09.png" alt="avatar" />
								<div class="msg-content">
									<span class="name">Steven Shipe</span>
									<span class="msg">Nonummy nibh epismod lorem ipsum</span>
								</div>
								<span class="msg-time">30s</span>
							</a>
						</li>
						<li>
							<a href="#">
								<img class="msg-avatar" src="assets/demo/avatar/avatar_01.png" alt="avatar" />
								<div class="msg-content">
									<span class="name">Roxann Hollingworth <i class="fa fa-paperclip attachment"></i></span>
									<span class="msg">Lorem ipsum dolor sit amet consectetur adipisicing elit</span>
								</div>
								<span class="msg-time">5m</span>
							</a>
						</li>
						<li>
							<a href="#">
								<img class="msg-avatar" src="assets/demo/avatar/avatar_05.png" alt="avatar" />
								<div class="msg-content">
									<span class="name">Diamond Harlands</span>
									<span class="msg">:)</span>
								</div>
								<span class="msg-time">3h</span>
							</a>
						</li>
						<li>
							<a href="#">
								<img class="msg-avatar" src="assets/demo/avatar/avatar_02.png" alt="avatar" />
								<div class="msg-content">
									<span class="name">Michael Serio <i class="fa fa-paperclip attachment"></i></span>
									<span class="msg">Sed distinctio dolores fuga molestiae modi?</span>
								</div>
								<span class="msg-time">12h</span>
							</a>
						</li>
						<li>
							<a href="#">
								<img class="msg-avatar" src="assets/demo/avatar/avatar_03.png" alt="avatar" />
								<div class="msg-content">
									<span class="name">Matt Jones</span>
									<span class="msg">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et mole</span>
								</div>
								<span class="msg-time">2d</span>
							</a>
						</li>
						<li>
							<a href="#">
								<img class="msg-avatar" src="assets/demo/avatar/avatar_07.png" alt="avatar" />
								<div class="msg-content">
									<span class="name">John Doe</span>
									<span class="msg">Neque porro quisquam est qui dolorem</span>
								</div>
								<span class="msg-time">7d</span>
							</a>
						</li>
					</ul>
				</div>

				<div class="dd-footer"><a href="#">View all messages</a></div>
			</div>
		</li>

		

		<li class="dropdown toolbar-icon-bg">
			<a href="#" class="dropdown-toggle" data-toggle='dropdown'><span class="icon-bg"><i class="fa fa-fw fa-user"></i></span></a>
			<ul class="dropdown-menu userinfo arrow">
				<li><a href="#"><span class="pull-left">Profile</span> <span class="badge badge-info">80%</span></a></li>
				<li><a href="#"><span class="pull-left">Account</span> <i class="pull-right fa fa-user"></i></a></li>
				<li><a href="#"><span class="pull-left">Settings</span> <i class="pull-right fa fa-cog"></i></a></li>
				<li class="divider"></li>
				<li><a href="#"><span class="pull-left">Earnings</span> <i class="pull-right fa fa-line-chart"></i></a></li>
				<li><a href="#"><span class="pull-left">Statement</span> <i class="pull-right fa fa-list-alt"></i></a></li>
				<li><a href="#"><span class="pull-left">Withdrawals</span> <i class="pull-right fa fa-dollar"></i></a></li>
				<li class="divider"></li>
				<li><a href="#"><span class="pull-left">Sign Out</span> <i class="pull-right fa fa-sign-out"></i></a></li>
			</ul>
		</li>

	</ul>

</header>

        <div id="wrapper">
            <div id="layout-static">
                <div class="static-sidebar-wrapper sidebar-inverse">
                    <div class="static-sidebar">
                        <div class="sidebar">
    <div class="widget stay-on-collapse" id="widget-welcomebox">
        <div class="widget-body welcome-box tabular">
            <div class="tabular-row">
                <div class="tabular-cell welcome-avatar">
                    <a href="#"><img src="assets/demo/avatar/avatar_02.png" class="avatar"></a>
                </div>
                <div class="tabular-cell welcome-options">
                    <span class="welcome-text">Welcome,</span>
                    <a href="#" class="name">Jonathan Smith</a>
                </div>
            </div>
        </div>
    </div>
	<div class="widget stay-on-collapse" id="widget-sidebar">
        <nav role="navigation" class="widget-body">
	<ul class="acc-menu">
		<li class="nav-separator">Explore</li>
		<li><a href="index.html"><i class="fa fa-home"></i><span>Dashboard</span></a></li>
		<!-- <li><a href="javascript:;"><i class="fa fa-user"></i><span>More Dashboard Pages</span></a>
			<ul class="acc-menu">
				<li><a href="sales-force.html">Sales Force</a></li>
				<li><a href="sales-performance.html">Sales Performance</a></li>
				<li><a href="kpi-dashboard.html">KPI Dashboard</a></li>
				<li><a href="shipping-status.html">Shipping Status</a></li>
				<li><a href="metrics-dashboard.html">Metrics Dashboard</a></li>
			</ul>
		</li> -->
		<li><a href="javascript:;"><i class="fa fa-columns"></i><span>Layouts</span><span class="badge badge-primary">8</span></a>
			<ul class="acc-menu">
				<li><a href="layout-grids.html">Grid Scaffolding</a></li>

				<li><a href="layout-fixed-sidebars.html">Stretch Sidebars</a></li>

				<li><a href="layout-sidebar-scroll.html">Sidebar Scroll</a></li>
				<li><a href="layout-static-leftbar.html">Static Sidebar</a></li>

				<li><a href="layout-infobar-offcanvas.html">Offcanvas Infobar</a></li>
				<li><a href="layout-infobar-overlay.html">Overlay Infobar</a></li>

				<li><a href="layout-page-tabs.html">Page Tabs</a></li>

				<li><a href="layout-fullheight-content.html">Fixed Height Content</a></li>
				<li><a href="layout-fullheight-panel.html">Fixed Height Panel</a></li>

				<li><a href="layout-leftbar-widgets.html">Leftbar Widgets <span class="label label-grape">Cool</span></a></li>
				<li><a href="layout-rightbar-widgets.html">Rightbar Widgets <span class="label label-grape">Cool</span></a></li>
				<li><a href="layout-topnav-options.html">Topnav Options</a></li>

				<li><a href="javascript:;">Horizontal Nav <span class="badge badge-dark">2</span></a>
					<ul class="acc-menu">
						<li><a href="layout-horizontal-small.html">Small Menu</a></li>
						<li><a href="layout-horizontal-large.html">Large Menu</a></li>
					</ul>
				</li>

				<li><a href="layout-chatbar-overlay.html">Chatbar</a></li>
				<li><a href="layout-boxed.html">Boxed</a></li>
				<li><a href="layout-compact.html">Compact Leftbar</a></li>
				
			</ul>
		</li>
		<li><a href="javascript:;"><i class="fa fa-flask"></i><span>Base Styles</span></a>
			<ul class="acc-menu">
				<li><a href="ui-typography.html">Typography</a></li>
				<li><a href="ui-buttons.html">Buttons</a></li>
				<li><a href="ui-tables.html">Tables</a></li>
				<li><a href="ui-forms.html">Forms</a></li>
				<li><a href="ui-images.html">Images</a></li>
				<li><a href="ui-panels.html">Panels</a></li>
				<li><a href="ui-icons.html">Font Icons</a></li>
				<li><a href="ui-helpers.html">Helpers</a></li>
			</ul>
		</li>
		<li><a href="javascript:;"><i class="fa fa-cogs"></i><span>Bootstrap</span><span class="label label-info">UI</span></a>
            <ul class="acc-menu">
                <li><a href="ui-modals.html">Modal Box</a></li>
                <li><a href="ui-progress.html">Progress Bars</a></li>
				<li><a href="ui-paginations.html">Pagers &amp; Paginations</a></li>
				<li><a href="ui-breadcrumbs.html">Breadcrumbs</a></li>
				<li><a href="ui-labelsbadges.html">Labels &amp; Badges</a></li>
                <li><a href="ui-alerts.html">Alerts &amp; Notificiations</a></li>
                <li><a href="ui-tabs.html">Tabs &amp; Accordions</a></li>
                
                <li><a href="ui-carousel.html">Carousel</a></li>
                <li><a href="ui-wells.html">Wells</a></li>
            </ul>
        </li>

		<li class="nav-separator">Plugins</li>
         <li><a href="javascript:;"><i class="fa fa-random"></i><span>Components</span></a>
        	<ul class="acc-menu">
        		<li><a href="ui-tiles.html">Tiles</a></li>
        		<li><a href="custom-skylo.html">Page Progress Bar</a></li>
        		<li><a href="custom-bootbox.html">Bootbox</a></li>
        		<li><a href="custom-datepaginator.html">Date Paginator</a></li>
        		<li><a href="custom-pines.html">Pines Notification</a></li>
        		<li><a href="custom-notific8.html">Notific8 Notification</a></li>
        		<li><a href="custom-pulsate.html">Pulsating Elements</a></li>
				<li><a href="custom-knob.html">jQuery Knob</a></li>
				<li><a href="custom-jqueryui.html">jQueryUI Widgets</a></li>
				<li><a href="custom-ionrange.html">Ion Range Slider</a></li>
				<li><a href="custom-tour.html">Tour</a></li>
				<li><a href="ui-nestable.html">Nestable Lists</a></li>
				<li><a href="custom-jstree.html">Tree View</a></li>
				<li><a href="custom-weather.html">Weather</a></li>
        	</ul>
        </li>
		<li><a href="javascript:;"><i class="fa fa-pencil"></i><span>Forms</span></a>
			<ul class="acc-menu">
				<li><a href="form-components.html">Form Components</a></li>
				<li><a href="form-pickers.html">Pickers</a></li>
				<li><a href="form-wizard.html">Form Wizard</a></li>
				<li><a href="form-validation.html">Form Validation</a></li>
				<li><a href="form-masks.html">Form Masks</a></li>
				<li><a href="form-dropzone.html">Dropzone Uploader</a></li>
				<li><a href="form-ckeditor.html">CKEditor</a></li>
				<li><a href="form-summernote.html">Summernote</a></li>
				<li><a href="form-markdown.html">Markdown Editor</a></li>
				<li><a href="form-xeditable.html">Inline Editor</a></li>
				<li><a href="form-imagecrop.html">Image Cropping</a></li>
				<li><a href="form-gridforms.html">Grid Forms</a></li>
			</ul>
		</li>
		<li><a href="javascript:;"><i class="fa fa-table"></i><span>Tables</span></a>
			<ul class="acc-menu">
				<li><a href="tables-responsive.html">Responsive Tables</a></li>
				<li><a href="tables-editable.html">Editable Tables</a></li>
				<li><a href="tables-data.html">Data Tables</a></li>
				<li><a href="tables-advanceddatatable.html">Advanced Data Tables</a></li>
				<li><a href="tables-fixedheader.html">Fixed Header Tables</a></li>
			</ul>
		</li>
		<li><a href="ui-advancedpanels.html"><i class="fa fa-cog fa-spin"></i><span>Panels</span><span class="label label-alizarin">HOT!</span></a></li>
		<li><a href="javascript:;"><i class="fa fa-bar-chart-o"></i><span>Analytics</span></a>
			<ul class="acc-menu">
				<li><a href="charts-flot.html">Flot</a></li>
				<li><a href="charts-sparklines.html">Sparklines</a></li>
				<li><a href="charts-morris.html">Morris.js</a></li>
				<li><a href="charts-chart.html">Chart.js</a></li>
				<li><a href="charts-easypiechart.html">Easy Pie Chart</a></li>
				<li><a href="charts-nvd3.html">nvd3 <span class="label label-info">New</span></a></li>
				<li><a href="charts-gantt.html">Gantt Chart</a></li>
			</ul>
		</li>
		<li><a href="javascript:;"><i class="fa fa-map-marker"></i><span>Maps</span></a>
			<ul class="acc-menu">
				<li><a href="maps-google.html">Google Maps</a></li>
				<li><a href="maps-vector.html">Vector Maps</a></li>
				<li><a href="maps-mapael.html">Mapael</a></li>
			</ul>
		</li>
		<li><a href="javascript:;"><i class="fa fa-files-o"></i><span>Pages</span></a>
			<ul class="acc-menu">
				<li><a href="extras-messages.html">Messages</a></li>
				<li><a href="extras-profile.html">Profile</a></li>
				<li><a href="extras-calendar.html">Calendar</a></li>
				<li><a href="extras-timeline.html">Timeline</a></li>
				<li><a href="extras-search.html">Search Page</a></li>
				<li><a href="extras-chatroom.html">Chat Room</a></li>
				<li><a href="extras-invoice.html">Invoice</a></li>
				<li><a href="javascript:;">Responsive Email Template</a>
					<ul class="acc-menu">
						<li><a href="responsive-email/basic.html">Basic</a></li>
						<li><a href="responsive-email/hero.html">Hero</a></li>
						<li><a href="responsive-email/sidebar.html">Sidebar</a></li>
						<li><a href="responsive-email/sidebar-hero.html">Sidebar Hero</a></li>
					</ul>
				</li>
				<li><a href="extras-gallery.html">Gallery</a></li>
				<li><a href="coming-soon.html">Coming Soon</a></li>
			</ul>
		</li>
		<li><a href="javascript:;"><i class="fa fa-briefcase"></i><span>Extras</span></a>
			<ul class="acc-menu">
				<li><a href="extras-pricingtable.html">Pricing Tables</a></li>
				<li><a href="extras-faq.html">FAQ</a></li>
				<li><a href="extras-registration.html">Registration</a></li>
				<li><a href="extras-forgotpassword.html">Password Reset</a></li>
				<li><a href="extras-login.html">Login</a></li>
				<li><a href="extras-404.html">404 Page</a></li>
				<li><a href="extras-500.html">500 Page</a></li>
			</ul>
		</li>
		<li><a href="javascript:;"><i class="fa fa-sitemap"></i><span>Multiple Levels</span><span class="badge badge-dark">99</span></a>
			<ul class="acc-menu">
				<li><a href="javascript:;">Menu Item 1</a></li>
				<li><a href="javascript:;">Menu Item 2</a>
					<ul class="acc-menu">
						<li><a href="javascript:;">Menu Item 2.1</a></li>
						<li><a href="javascript:;">Menu Item 2.2</a>
							<ul class="acc-menu">
								<li><a href="javascript:;">Menu Item 2.2.1</a></li>
								<li><a href="javascript:;">Menu Item 2.2.2</a>
									<ul class="acc-menu">
										<li><a href="javascript:;">And deeper yet!</a></li>
									</ul>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="disabled-link"><a href="index.html">Disabled Menu Item</a></li>
			</ul>
		</li>

		<li class="nav-separator">Functional Apps</li>
		<li><a href="app-inbox.html"><i class="fa fa-inbox"></i><span>Inbox</span><span class="badge badge-success">3</span></a></li>
		<li><a href="app-tasks.html"><i class="fa fa-tasks"></i><span>Tasks</span><span class="badge badge-info">7</span></a></li>
		<li><a href="app-notes.html"><i class="fa fa-pencil-square-o"></i><span>Notes</span></a></li>
		<li><a href="app-todo.html"><i class="fa fa-check"></i><span>Todo</span><span class="badge badge-dark">10</span></a></li>

		<li class="nav-separator">Templates</li>
		<li><a href="javascript:;"><i class="fa fa-coffee"></i><span>Blog</span></a>
			<ul class="acc-menu">
				<!-- <li><a href="app-blog-dashboard.html">Dashboard</a></li> -->
				<li><a href="app-blog-page-list.html">Page List</a></li>
				<li><a href="app-blog-edit.html">Page Edit</a></li>
				<li><a href="app-blog-comment.html">Comment Moderation</a></li>
				<li><a href="javascript:;">Blog Front</a>
					<ul class="acc-menu">
						<li><a href="app-blogfront-list.html">Blog Page</a></li>
						<li><a href="app-blogfront-page.html">Blog Post</a></li>
						<li><a href="app-blogfront-column.html">Blog Column</a></li>
						<li><a href="app-blogfront-portfolio.html">Porfolio</a></li>
					</ul>
				</li>

				
			</ul>
		</li>
		<li><a href="javascript:;"><i class="fa fa-shopping-cart"></i><span>eCommerce</span></a>
			<ul class="acc-menu">
				<!-- <li><a href="app-ecommerce-dashboard.html">Dashboard</a></li> -->
				<!-- <li><a href="app-ecommerce-order-list.html">Order List</a></li>
				<li><a href="app-ecommerce-order-details.html">Order Details</a></li> -->
				<li><a href="app-ecommerce-product-list.html">Product List</a></li>
				<li><a href="app-ecommerce-product-edit.html">Product Edit</a></li>
				<li><a href="javascript:;">Store Front</a>
					<ul class="acc-menu">
						<li><a href="app-store-product-list.html">Product List</a></li>
						<!-- <li><a href="app-store-product-column.html">Product Column</a></li> -->
						<li><a href="app-store-product-details.html">Product Details</a></li>
						<li><a href="app-store-shoppingcart.html">Shopping Cart</a></li>
						<li><a href="app-store-checkout.html">Checkout</a></li>
					</ul>
				</li>
			</ul>
		</li>
		
	</ul>
</nav>
    </div>
</div>
                    </div>
                </div>
                <div class="static-content-wrapper">
                    <div class="static-content">
                        <div class="page-content">
                            <div class="page-heading">            
                                <h1>Full Height Panel</h1>
                                <div class="options">
    <div class="btn-toolbar">
        <a href="#" class="btn btn-default"><i class="fa fa-fw fa-wrench"></i></a>
    </div>
</div>
                            </div>
                            <ol class="breadcrumb">
                                
<li><a href="index.html">Home</a></li>
<li><a href="#">Layout</a></li>
<li class="active"><a href="layout-fullheight-panel.html">Full Height Panel</a></li>

                            </ol>
                            <div class="container-fluid">
                                 
	<div class="row">
		<div class="col-md-12">
		
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h2>Full Height Panel</h2>
				</div>
				<div class="panel-body full-height-content scroll-pane">
					<div class="scroll-content">

						<h3>Metamorphosis</h3>
						<h4>by Franz Kafka</h4>
						<p>One morning, as Gregor Samsa was waking up from anxious dreams, he discovered that in his bed he had been changed into a monstrous verminous bug. He lay on his armour-hard back and saw, as he lifted his head up a little, his brown, arched abdomen divided up into rigid bow-like sections. From this height the blanket, just about ready to slide off completely, could hardly stay in place. His numerous legs, pitifully thin in comparison to the rest of his circumference, flickered helplessly before his eyes.</p>

						<p>“What’s happened to me,” he thought. It was no dream. His room, a proper room for a human being, only somewhat too small, lay quietly between the four well-known walls. Above the table, on which an unpacked collection of sample cloth goods was spread out—Samsa was a travelling salesman—hung the picture which he had cut out of an illustrated magazine a little while ago and set in a pretty gilt frame. It was a picture of a woman with a fur hat and a fur boa. She sat erect there, lifting up in the direction of the viewer a solid fur muff into which her entire forearm had disappeared.</p>

						<p>Gregor’s glance then turned to the window. The dreary weather—the rain drops were falling audibly down on the metal window ledge—made him quite melancholy. “Why don’t I keep sleeping for a little while longer and forget all this foolishness,” he thought. But this was entirely impractical, for he was used to sleeping on his right side, but in his present state he could not get himself into this position. No matter how hard he threw himself onto his right side, he always rolled onto his back again. He must have tried it a hundred times, closing his eyes so that he would not have to see the wriggling legs, and gave up only when he began to feel a light, dull pain in his side which he had never felt before.</p>

						<p>“O God,” he thought, “what a demanding job I’ve chosen! Day in, day out, on the road. The stresses of selling are much greater than the actual work going on at head office, and, in addition to that, I still have to cope with the problems of travelling, the worries about train connections, irregular bad food, temporary and constantly changing human relationships, which never come from  the heart. To hell with it all!” He felt a slight itching on the top of his abdomen. He slowly pushed himself on his back closer to the bed post so that he could lift his head more easily, found the itchy part, which was entirely covered with small white spots—he did not know what to make of them and wanted to feel the place with a leg, but he retracted it immediately, for the contact felt like a cold shower all over him.</p>

						<p>He slid back again into his earlier position. “This getting up early,” he thought, “makes a man quite idiotic. A man must have his sleep. Other travelling salesmen live like harem women. For instance, when I come back to the inn during the course of the morning to write up the necessary orders, these gentlemen are just sitting down to breakfast. If I were to try that with my boss, I’d be thrown out on the spot. Still, who knows whether that mightn’t be really good for me. If I didn’t hold back for my parents’ sake, I’d have quit ages ago. I would’ve gone to the boss and told him just what I think from the bottom of my heart. He would’ve fallen right off his desk! How weird it is to sit up at that desk and talk down to the employee from way up there. What’s more, the boss has trouble hearing, so the employee has to step up quite close to him. Anyway, I haven’t completely given up that hope yet. Once I’ve got together the money to pay off my parents’ debt to him—that should take another five or six years—I’ll do it for sure. Then I’ll make the big break. In any case, right now I have to get up. My train leaves at five o’clock.”</p>

						<p>He looked over at the alarm clock ticking away by the chest of drawers. “Good God!” he thought. It was half past six, and the hands were going quietly on. It was even past the half hour, already nearly quarter to. Could the alarm have failed to ring? One saw from the bed that it was properly set for four o’clock. Certainly it had rung. Yes, but was it possible to sleep peacefully through that noise which made the furniture shake? Now, it is true he had not slept peacefully, but evidently he had slept all the more deeply. Still, what should he do now? The next train left at seven o’clock. To catch that one, he would have to go in a mad rush. The sample collection was not packed up yet, and he really did not feel particularly fresh and active. And even if he caught the train, there was no avoiding a blow-up with the boss, because the firm’s errand boy would have waited for the five o’clock train and reported the news of his absence long ago. He was the boss’s minion, without backbone and intelligence. Well then, what if he reported in sick? But that would be extremely embarrassing and suspicious, because during his five years’ service Gregor had not been sick even once. The boss would certainly come with the doctor from the health insurance company and would reproach his parents for their lazy son and cut short all objections with the insurance doctor’s comments; for him everyone was completely healthy but really lazy about work. And besides, would the doctor in this case be totally wrong? Apart from a really excessive drowsiness after the long sleep, Gregor, in fact, felt quite well and even had a really strong appetite.</p>

						<p>As he was thinking all this over in the greatest haste, without being able to make the decision to get out of bed—the alarm clock was indicating exactly quarter to seven—there was a cautious knock on the door by the head of the bed. “Gregor,” a voice called—it was his mother—“it’s quarter to seven. Don’t you want to be on your way?” The soft voice! Gregor was startled when he heard his voice answering. It was clearly and unmistakably his earlier voice, but in it was intermingled, as if from below, an irrepressible, painful squeaking, which left the words positively distinct only in the first moment and distorted them in the reverberation, so that one did not know if one had heard correctly. Gregor wanted to answer in detail and explain everything, but in these circumstances he confined himself to saying, “Yes, yes, thank you mother. I’m getting up right away.” Because of the wooden door the change in Gregor’s voice was not really noticeable outside, so his mother calmed down with this explanation and shuffled off. However, as a result of the short conversation, the other family members became aware that Gregor was unexpectedly still at home, and already his father was knocking on one side door, weakly but with his fist. “Gregor, Gregor,” he called out, “what’s going on?” And, after a short while, he urged him on again in a deeper voice: “Gregor! Gregor!” At the other side door, however, his sister knocked lightly. “Gregor? Are you all right? Do you need anything?” Gregor directed answers in both directions, “I’ll be ready right away.” He made an effort with the most careful articulation and inserted long pauses between the individual words to remove everything remarkable from his voice. His father turned back to his breakfast. However, the sister whispered, “Gregor, open the door—I beg you.” Gregor had no intention of opening the door, but congratulated himself on his precaution, acquired from travelling, of locking all doors during the night, even at home.</p>

						<p>First he wanted to stand up quietly and undisturbed, get dressed, above all have breakfast, and only then consider further action, for—he noticed this clearly—by thinking things over in bed he would not reach a reasonable conclusion. He remembered that he had already often felt some light pain or other in bed, perhaps the result of an awkward lying position, which later, once he stood up, turned out to be purely imaginary, and he was eager to see how his present fantasies would gradually dissipate. That the change in his voice was nothing other than the onset of a real chill, an occupational illness of commercial travellers, of that he had not the slightest doubt.</p>

						<p>It was very easy to throw aside the blanket. He needed only to push himself up a little, and it fell by itself. But to continue was difficult, particularly because he was so unusually wide. He needed arms and hands to push himself upright. Instead of these, however, he had only many small limbs, which were incessantly moving with very different motions and which, in addition, he was unable to control. If he wanted to bend one of them, then it was the first to extend itself, and if he finally succeeded doing what he wanted with this limb, in the meantime all the others, as if left free, moved around in an excessively painful agitation. “But I must not stay in bed uselessly,” said Gregor to himself.</p>

						<p>At first he wanted to get out of bed with the lower part of his body, but this lower part—which, by the way, he had not yet looked at and which he also could not picture clearly—proved itself too difficult to move. The attempt went so slowly. When, having become almost frantic, he finally hurled himself forward with all his force and without thinking, he chose his direction incorrectly, and he hit the lower bedpost hard. The violent pain he felt revealed to him that the lower part of his body was at the moment probably the most sensitive.</p>

						<p>Thus, he tried to get his upper body out of the bed first and turned his head carefully toward the edge of the bed. He managed to do this easily, and in spite of its width and weight his body mass at last slowly followed the turning of his head. But as he finally raised his head outside the bed in the open air, he became anxious about moving forward any further in this manner, for if he allowed himself eventually to fall by this process, it would really take a miracle to prevent his head from getting injured. And at all costs he must not lose consciousness right now. He preferred to remain in bed.</p>

						<p>However, after a similar effort, while he lay there again, sighing as before, and once again saw his small limbs fighting one another, if anything even worse than earlier, and did not see any chance of imposing quiet and order on this arbitrary movement, he told himself again that he could not possibly remain in bed and that it might be the most reasonable thing to sacrifice everything if there was even the slightest hope of getting himself out of bed in the process. At the same moment, however, he did not forget to remind himself from time to time of the fact that calm—indeed the calmest—reflection might be much better than confused decisions. At such moments, he directed his gaze as precisely as he could toward the window, but unfortunately there was little confident cheer to be had from a glance at the morning mist, which concealed even the other side of the narrow street. “It’s already seven o’clock,” he told himself at the latest sounds from the alarm clock, “already seven o’clock and still such a fog.” And for a little while longer he lay quietly with weak breathing, as if perhaps waiting for normal and natural conditions to re-emerge out of the complete stillness.</p>

						<p>But then he said to himself, “Before it strikes a quarter past seven, whatever happens I must be completely out of bed. Besides, by then someone from the office will arrive to inquire about me, because the office will open before seven o’clock.” And he made an effort then to rock his entire body length out of the bed with a uniform motion. If he let himself fall out of the bed in this way, his head, which in the course of the fall he intended to lift up sharply, would probably remain uninjured. His back seemed to be hard; nothing would really happen to that as a result of the fall onto the carpet. His greatest reservation was a worry about the loud noise which the fall must create and which presumably would arouse, if not fright, then at least concern on the other side of all the doors. However, he had to take that chance.</p>

						<p>As Gregor was already in the process of lifting himself half out of bed—the new method was more of a game than an effort; he needed only to rock with a series of jerks—it struck him how easy all this would be if someone were to come to his aid. Two strong people—he thought of his father and the servant girl—would have been quite sufficient. They would only have had to push their arms under his arched back to get him out of the bed, to bend down with their load, and then merely to exercise patience so that he could complete the flip onto the floor, where his diminutive legs would then, he hoped, acquire a purpose. Now, quite apart from the fact that the doors were locked, should he really call out for help? In spite of all his distress, he was unable to suppress a smile at this idea.</p>

						<p>He had already got to the point where, by rocking more strongly, he maintained his equilibrium with difficulty, and very soon he would finally have to make a final decision, for in five minutes it would be a quarter past seven. Then there was a ring at the door of the apartment. “That’s someone from the office,” he told himself, and he almost froze, while his small limbs only danced around all the faster. For one moment everything remained still. “They aren’t opening,” Gregor said to himself, caught up in some absurd hope. But of course then, as usual, the servant girl with her firm tread went to the door and opened it. Gregor needed to hear only the first word of the visitor’s greeting to recognize immediately who it was, the manager himself. Why was Gregor the only one condemned to work in a firm where, at the slightest lapse, someone at once attracted the greatest suspicion? Were all the employees then collectively, one and all, scoundrels? Among them was there then no truly devoted person who, if he failed to use just a couple of hours in the morning for office work, would become abnormal from pangs of conscience and really be in no state to get out of bed? Was it really not enough to let an apprentice make inquiries, if such questioning was even generally  necessary? Must the manager himself come, and in the process must it be demonstrated to the entire innocent family that the investigation of this suspicious circumstance could be entrusted only to the intelligence of the manager? And more as a consequence of the excited state in which this idea put Gregor than as a result of an actual decision, he swung himself with all his might out of the bed. There was a loud thud, but not a real crash. The fall was absorbed somewhat by the carpet and, in addition, his back was more elastic than Gregor had thought. For that reason the dull noise was not quite so conspicuous. But he had not held his head up with sufficient care and had hit it. He turned his head, irritated and in pain, and rubbed it on the carpet.</p>

						<p>“Something has fallen in there,” said the manager in the next room on the left. Gregor tried to imagine to himself whether anything similar to what was happening to him today could have also happened at some point to the manager. At least one had to concede the possibility of such a thing. However, as if to give a rough answer to this question, the manager now, with a squeak of his polished boots, took a few determined steps in the next room. From the neighbouring room on the right the sister was whispering to inform Gregor: “Gregor, the manager is here.” “I know,” said Gregor to himself. But he did not dare make his voice loud enough so that his sister could hear.</p>

						<p>“Gregor,” his father now said from the neighbouring room on the left, “Mr. Manager has come and is asking why you have not left on the early train. We don’t know what we should tell him. Besides, he also wants to speak to you personally. So please open the door. He will be good enough to forgive the mess in your room.” In the middle of all this, the manager called out in a friendly way, “Good morning, Mr. Samsa.” “He is not well,” said his mother to the manager, while his father was still talking at the door, “He is not well, believe me, Mr. Manager. Otherwise how would Gregor miss a train? The young man has nothing in his head except business. I’m almost angry that he never goes out in the evening. Right now he’s been in the city eight days, but he’s been at home every evening. He sits here with us at the table and reads the newspaper quietly or studies his travel schedules. It’s a quite a diversion for him to busy himself with fretwork. For instance, he cut out a small frame over the course of two or three evenings. You’d be amazed how pretty it is. It’s hanging right inside the room. You’ll see it immediately, as soon as Gregor opens the door. Anyway, I’m happy that you’re here, Mr. Manager. By ourselves, we would never have made Gregor open the door. He’s so stubborn, and he’s certainly not well, although he denied that this morning.” “I’m coming right away,” said Gregor slowly and deliberately and didn’t move, so as not to lose one word of the conversation. “My dear lady, I cannot explain it to myself in any other way,” said the manager; “I hope it is nothing serious. On the other hand, I must also say that we business people, luckily or unluckily, however one looks at it, very often simply have to overcome a slight indisposition for business reasons.” “So can Mr. Manager come in to see you now?” asked his father impatiently and knocked once again on the door. “No,” said Gregor. In the neighbouring room on the left an awkward stillness descended. In the neighbouring room on the right the sister began to sob.</p>

						<p>Why did his sister not go to the others? She had probably just got up out of bed now and had not even started to get dressed yet. Then why was she crying? Because he was not getting up and letting the manager in, because he was in danger of losing his position, and because then his boss would badger his parents once again with the old demands? Those were probably unnecessary worries right now. Gregor was still here and was not thinking at all about abandoning his family. At the moment he was lying right there on the carpet, and no one who knew about his condition would have seriously demanded that he let the manager in. But Gregor would not be casually dismissed right way because of this small discourtesy, for which he would find an easy and suitable excuse later on. It seemed to Gregor that it might be far more reasonable to leave him in peace at the moment, instead of disturbing him with crying and conversation. But it was the very uncertainty which distressed the others and excused their behaviour.</p>

						<p>“Mr. Samsa,” the manager was now shouting, his voice raised, “what’s the matter? You are barricading yourself there in your room, answering with only a yes and a no, are making serious and unnecessary trouble for your parents, and neglecting—I mention this only incidentally—your commercial duties in a truly unheard of manner. I am speaking here in the name of your parents and your employer, and I am requesting you in all seriousness for an immediate and clear explanation. I am amazed. I am amazed. I thought I knew you as a calm, reasonable person, and now you appear suddenly to want to start parading around in weird moods. The Chief indicated to me earlier this very day a possible explanation for your neglect—it concerned the collection of cash entrusted to you a short while ago—but in truth I almost gave him my word of honour that this explanation could not be correct. However, now I see here your unimaginable pig headedness, and I am totally losing any desire to speak up for you in the slightest. And your position is not at all the most secure. Originally I intended to mention all this to you privately, but since you are letting me waste my time here uselessly, I don’t know why the matter shouldn’t come to the attention of your parents as well. Your productivity has also been very unsatisfactory recently. Of course, it’s not the time of year to conduct exceptional business, we recognize that, but a time of year for conducting no business, there is no such thing at all, Mr. Samsa, and such a thing must not be permitted.”</p>

						<p>“But Mr. Manager,” called Gregor, beside himself and, in his agitation, forgetting everything else, “I’m opening the door immediately, this very moment. A slight indisposition, a dizzy spell, has prevented me from getting up. I’m still lying in bed right now. But I’m quite refreshed once again. I’m in the midst of getting out of bed. Just have patience for a short moment! Things are not yet going as well as I thought. But things are all right with me. How suddenly this can overcome someone! Only yesterday evening everything was fine with me. My parents certainly know that. Actually just yesterday evening I had a small premonition. People must have seen that in me. Why have I not reported that to the office? But people always think that they’ll get over sickness without having to stay at home. Mr. Manager! Take it easy on my parents! There is really no basis for the criticisms which you’re now making against me. Nobody has said a word to me about that. Perhaps you have not read the latest orders which I sent in. Besides, now I’m setting out on my trip on the eight o’clock train; the few hours’ rest have made me stronger. Mr. Manager, do not stay. I will be at the office in person right away. Please have the goodness to say that and to convey my respects to the Chief.”</p>

						<p>While Gregor was quickly blurting all this out, hardly aware of what he was saying, he had moved close to the chest of drawers without effort, probably as a result of the practice he had already had in bed, and now he was trying to raise himself up on it. Actually, he wanted to open the door. He really wanted to let himself be seen and to speak with the manager. He was keen to witness what the others now asking about him would say when they saw him. If they were startled, then Gregor had no more responsibility and could be calm. But if they accepted everything quietly, then he would have no reason to get excited and, if he got a move on, could really be at the station around eight o’clock. At first he slid down a few times on the smooth chest of drawers. But at last he gave himself a final swing and stood upright there. He was no longer at all aware of the pains in his lower body, no matter how they might still sting. Now he let himself fall against the back of a nearby chair, on the edge of which he braced himself with his small limbs. By doing this he gained control over himself and kept quiet, for he could now hear the manager.</p>

						<p>“Did you understand even a single word?” the manager asked the parents, “Is he playing the fool with us?” “For God’s sake,” cried the mother, already in tears, “perhaps he’s very ill, and we’re upsetting him. Grete! Grete!” she yelled at that point. “Mother?” called the sister from the other side. They were making themselves understood through Gregor’s room. “You must go to the doctor right away. Gregor is sick. Hurry to the doctor. Did you hear Gregor speak just now?” “That was an animal’s voice,” said the manager, remarkably quiet in comparison to the mother’s cries. “Anna! Anna!” yelled the father through the hall into the kitchen, clapping his hands, “Fetch a locksmith right away!” The two young women were already running through the hall with swishing skirts—how had his sister dressed herself so quickly?—and pulled open the doors of the apartment. One could not hear the doors closing at all. They probably had left them open, as is customary in an apartment where a huge misfortune has taken place.</p>

						<p>Gregor pushed himself slowly towards the door, with the help of the easy chair, let go of it there, threw himself against the door, held himself upright against it—the balls of his tiny limbs had a little sticky stuff on them—and rested there momentarily from his exertion. Then he made an effort to turn the key in the lock with his mouth. Unfortunately it seemed that he had no real teeth. How then was he to grab hold of the key? But to make up for that his jaws were naturally very strong; with their help he managed to get the key really moving. He did not notice that he was obviously inflicting some damage on himself, for a brown fluid came out of his mouth, flowed over the key, and dripped onto the floor. “Just listen,” said the manager in the next room. “He’s turning the key.” For Gregor that was a great encouragement. But they should all have called out to him, including his father and mother, “Come on, Gregor,” they should have shouted. “Keep going, keep working on the lock!” Imagining that all his efforts were being followed with suspense, he bit down frantically on the key with all the force he could muster. As the key turned more, he danced around the lock. Now he was holding himself upright only with his mouth, and he had to hang onto the key or then press it down again with the whole weight of his body, as necessary. The quite distinct click of the lock as it finally snapped really woke Gregor up. Breathing heavily he said to himself, “So I didn’t need the locksmith,” and he set his head against the door handle to open the door completely.</p>

						<p>Because he had to open the door in this way, it was already open really wide without him yet being visible. He first had to turn himself slowly around the edge of the door, very carefully, of course, if he did not want to fall awkwardly on his back right at the entrance into the room. He was still preoccupied with this difficult movement and had no time to pay attention to anything else, when he heard the manager exclaim a loud “Oh!”—it sounded like the wind whistling—and now he saw him, nearest to the door, pressing his hand against his open mouth and moving slowly back, as if an invisible constant force was pushing him away. His mother—in spite of the presence of the manager she was standing here with her hair sticking up on end, still a mess from the night—first looked at his father with her hands clasped, then went two steps towards Gregor and collapsed right in the middle of her skirts, which were spread out all around her, her face sunk on her breast, completely concealed. His father clenched his fist with a hostile expression, as if he wished to push Gregor back into his room, then looked uncertainly around the living room, covered his eyes with his hands, and cried so that his mighty breast shook.</p>

						<p>At this point Gregor did not take one step into the room, but leaned his body from the inside against the firmly bolted wing of the door, so that only half his body was visible, as well as his head, tilted sideways, with which he peeped over at the others. Meanwhile it had become much brighter. Standing out clearly from the other side of the street was a section of the endless gray-black house situated opposite—it was a hospital—with its severe regular windows breaking up the facade. The rain was still coming down, but only in large individual drops visibly and firmly thrown down one by one onto the ground. Countless breakfast dishes were standing piled around on the table, because for his father breakfast was the most important meal time in the day, which he prolonged for hours by reading various newspapers. Directly across on the opposite wall hung a photograph of Gregor from the time of his military service; it was a picture of him as a lieutenant, as he, smiling and worry free, with his hand on his sword, demanded respect for his bearing and uniform. The door to the hall was ajar, and since the door to the apartment was also open, one could see out into the landing of the apartment and the start of the staircase going down.</p>

						<p>“Now,” said Gregor, well aware that he was the only one who had kept his composure. “I’ll get dressed right away, pack up the collection of samples, and set off. You’ll allow me to set out on my way, will you not? You see, Mr. Manager, I am not pig-headed, and I am happy to work. Travelling is exhausting, but I couldn’t live without it. Where are you going, Mr. Manager? To the office? Really? Will you report everything truthfully? A person can be incapable of work momentarily, but that’s precisely the best time to remember the earlier achievements and to consider that later, after the obstacles have been shoved aside, the person will certainly work all the more diligently and intensely. I am really so indebted to Mr. Chief—you know that perfectly well. On the other hand, I am concerned about my parents and my sister. I’m in a fix, but I’ll work myself out of it again. Don’t make things more difficult for me than they already are. Speak up on my behalf in the office! People don’t like travelling salesmen. I know that. People think they earn pots of money and thus lead a fine life. People don’t even have any special reason to think through this judgment more clearly. But you, Mr. Manager, you have a better perspective on what’s involved than other people, even, I tell you in total confidence, a better perspective than Mr. Chief himself, who in his capacity as the employer may easily let his judgment make mistakes at the expense of an employee. You also know well enough that the travelling salesman who is outside the office almost the entire year can become so easily a victim of gossip, coincidences, and groundless complaints, against which it’s totally impossible for him to defend himself, since for the most part he doesn’t hear about them at all and only then when he’s exhausted after finishing a trip and at home gets to feel in his own body the nasty consequences, which can’t be thoroughly explored back to their origins. Mr. Manager, don’t leave without speaking a word indicating to me that you’ll at least concede that I’m a little in the right!”</p>

						<p>But at Gregor’s first words the manager had already turned away, and now he looked back with pursed lips at Gregor over his twitching shoulders. During Gregor’s speech he was not still for a moment but kept moving away towards the door, without taking his eyes off Gregor, but really gradually, as if there was a secret ban on leaving the room. He was already in the hall, and given the sudden movement with which he finally pulled his foot out of the living room, one could have believed that he had just burned the sole of his foot. In the hall, however, he stretched his right hand out away from his body towards the staircase, as if some truly supernatural relief was waiting for him there.</p>

						<p>Gregor realized that he must not under any circumstances allow the manager to go away in this frame of mind, especially if his position in the firm was not to be placed in the greatest danger. His parents did not understand all this very well. Over the long years, they had developed the conviction that Gregor was set up for life in this firm and, in addition, they had so much to do nowadays with their present troubles that all foresight was foreign to them. But Gregor had this foresight. The manager must be held back, calmed down, convinced, and finally won over. The future of Gregor and his family really depended on it! If only the sister had been there! She was clever. She had already cried while Gregor was still lying quietly on his back. And the manager, this friend of the ladies, would certainly let himself be guided by her. She would have closed the door to the apartment and talked him out of his fright in the hall. But the sister was not even there. Gregor must deal with it himself.  And without thinking that as yet he did not know anything about his present ability to move and without thinking that his speech possibly—indeed probably—had once again not been understood, he left the wing of the door, pushed himself through the opening, and wanted to go over to the manager, who was already holding tight with both hands gripping the handrail on the landing in a ridiculous way. But as Gregor looked for something to steady himself, with a small scream he immediately fell down onto his numerous little legs. Scarcely had this happened, when he felt for the first time that morning a general physical well being. The small limbs had firm floor under them; they obeyed perfectly, as he noticed to his joy, and even strove to carry him forward in the direction he wanted. Right away he believed that the final amelioration of all his suffering was immediately at hand. But at the very moment when he lay on the floor rocking in a restrained manner quite close and directly across from his mother, who had apparently totally sunk into herself, she suddenly sprang right up with her arms spread far apart and her fingers extended and cried out, “Help, for God’s sake, help!” She held her head bowed down, as if she wanted to view Gregor better, but ran senselessly back, contradicting that gesture, forgetting that behind her stood the table with all the dishes on it. When she reached the table, she sat down heavily on it, as if absent-mindedly, and did not appear to notice at all that next to her coffee was pouring out onto the carpet in a full stream from the large, overturned container.</p>

						<p>“Mother, mother,” said Gregor quietly and looked over towards her. The manager had momentarily vanished completely from his mind. On the other hand, when he saw the flowing coffee Gregor could not stop himself snapping his jaws in the air a few times. At that his mother screamed all over again, hurried from the table, and collapsed into the arms of his father, who was rushing towards her. But Gregor had no time right now for his parents—the manager was already on the staircase. With his chin on the bannister, the manager looked back for the last time. Gregor took an initial movement to catch up to him if possible. But the manager must have suspected something, because he made a leap down over a few stairs and disappeared, still shouting “Huh!” The sound echoed throughout the entire stairwell.</p>

						<p>But now unfortunately this flight of the manager seemed to bewilder his father completely. Earlier he had been relatively calm. For instead of running after the manager himself or at least not hindering Gregor from his pursuit, with his right hand he grabbed hold of the manager’s cane, which he had left behind on a chair with his hat and overcoat. With his left hand, his father grabbed a large newspaper from the table and, stamping his feet on the floor, he set out to drive Gregor back into his room by waving the cane and the newspaper. No request of Gregor’s was of any use; no request would even be understood. No matter how willing he was to turn his head respectfully, his father just stomped all the harder with his feet. Across the room from him his mother had pulled open a window, in spite of the cool weather, and leaning out with her hands on her cheeks, she pushed her face far outside the window. Between the lane and the stairwell a strong draught came up, the curtains on the window flew around, the newspapers on the table rustled, and individual sheets fluttered down over the floor. The father relentlessly pushed his way forward, hissing like a wild man. Now, Gregor still had no practice at all in going backwards—it was really very slow going. If Gregor only had been allowed to turn himself around, he would have been in his room right away, but he was afraid to make his father impatient by the time-consuming process of turning around, and each moment he faced the threat of a mortal blow on his back or his head from the cane in his father’s hand. Finally Gregor had no other option, for he noticed with horror that he did not understand yet how to maintain his direction going backwards. And so he began, amid constantly anxious sideways glances in his father’s direction, to turn himself around as quickly as possible, although in truth this was only done very slowly. Perhaps his father noticed his good intentions, for he did not disrupt Gregor in this motion, but with the tip of the cane from a distance he even directed Gregor’s rotating movement now and then. If only his father had not hissed so unbearably! Because of that Gregor totally lost his head. He was already almost totally turned around, when, always with this hissing in his ear, he just made a mistake and turned himself back a little. But when he finally was successful in getting his head in front of the door opening, it became clear that his body was too wide to go through any further. Naturally his father, in his present mental state, had no idea of, say, opening the other wing of the door a bit to create a suitable passage for Gregor to get through. His single fixed thought was that Gregor must get into his room as quickly as possible. He would never have allowed the elaborate preparations that Gregor required to orient himself and thus perhaps in this way to get through the door. Perhaps with his excessive noise he was now driving Gregor forwards as if there were no obstacle. Behind Gregor the sound at this point was no longer like the voice of only a single father. Now it was really no longer a joke, and Gregor forced himself, come what might, into the door. One side of his body was lifted up. He lay at an angle in the door opening. His one flank was really sore from the scraping. On the white door ugly blotches were left. Soon he was stuck fast and would not have been able to move any more on his own. The tiny legs on one side hung twitching in the air above, and the ones on the other side were pushed painfully into the floor. Then his father gave him one really strong liberating push from behind, and he scurried, bleeding severely, far into the interior of his room. The door was slammed shut with the cane, and then finally it was quiet.</p>
					</div>
				</div>
			</div>
		</div>
	</div>

                            </div> <!-- .container-fluid -->
                        </div> <!-- #page-content -->
                    </div>
                    <footer role="contentinfo">
    <div class="clearfix">
        <ul class="list-unstyled list-inline pull-left">
            <li><h6 style="margin: 0;"> &copy; 2015 Avenger</h6></li>
        </ul>
        <button class="pull-right btn btn-link btn-xs hidden-print" id="back-to-top"><i class="fa fa-arrow-up"></i></button>
    </div>
</footer>
                </div>
            </div>
        </div>

        <div class="infobar-wrapper scroll-pane">
            <div class="infobar scroll-content">

    <div id="widgetarea">

        <div class="widget" id="widget-sparkline">
            <div class="widget-heading">
                <a href="javascript:;" data-toggle="collapse" data-target="#sparklinestats"><h4>Sparkline Stats</h4></a>
            </div>
            <div id="sparklinestats" class="collapse in">
                <div class="widget-body">
                    <ul class="sparklinestats">
                        <li>
                            <div class="title">Earnings</div>
                            <div class="stats">$22,500</div>
                            <div class="sparkline" id="infobar-earningsstats" style="100%"></div>
                        </li>
                        <li>
                            <div class="title">Orders</div>
                            <div class="stats">4,750</div>
                            <div class="sparkline" id="infobar-orderstats" style="100%"></div>
                        </li>
                    </ul>
                    <a href="#" class="more">More Sparklines</a>
                </div>
            </div>
        </div>

        <div class="widget">
            <div class="widget-heading">
                <a href="javascript:;" data-toggle="collapse" data-target="#recentactivity"><h4>Recent Activity</h4></a>
            </div>
            <div id="recentactivity" class="collapse in">
                <div class="widget-body">
                    <ul class="recent-activities">
                        <li>
                            <div class="avatar">
                                <img src="assets/demo/avatar/avatar_11.png" class="img-responsive img-circle">
                            </div>
                            <div class="content">
                                <span class="msg"><a href="#" class="person">Jean Alanis</a> invited 3 unconfirmed members</span>
                                <span class="time">2 mins ago</span>
                                
                            </div>
                        </li>
                        <li>
                            <div class="avatar">
                                <img src="assets/demo/avatar/avatar_09.png" class="img-responsive img-circle">
                            </div>
                            <div class="content">
                                <span class="msg"><a href="#" class="person">Anthony Ware</a> is now following you</span>
                                <span class="time">4 hours ago</span>
                                
                            </div>
                        </li>
                        <li>
                            <div class="avatar">
                                <img src="assets/demo/avatar/avatar_04.png" class="img-responsive img-circle">
                            </div>
                            <div class="content">
                                <span class="msg"><a href="#" class="person">Bruce Ory</a> commented on <a href="#">Dashboard UI</a></span>
                                <span class="time">16 hours ago</span>
                            </div>
                        </li>
                        <li>
                            <div class="avatar">
                                <img src="assets/demo/avatar/avatar_01.png" class="img-responsive img-circle">
                            </div>
                            <div class="content">
                                <span class="msg"><a href="#" class="person">Roxann Hollingworth</a>is now following you</span>
                                <span class="time">Feb 13, 2015</span>
                            </div>
                        </li>
                    </ul>
                    <a href="#" class="more">See all activities</a>
                </div>
            </div>
        </div>

        <div class="widget" >
            <div class="widget-heading">
                <a href="javascript:;" data-toggle="collapse" data-target="#widget-milestones"><h4>Milestones</h4></a>
            </div>
            <div id="widget-milestones" class="collapse in">
                <div class="widget-body">
                    <div class="contextual-progress">
                        <div class="clearfix">
                            <div class="progress-title">UI Design</div>
                            <div class="progress-percentage">12/16</div>
                        </div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-lime" style="width: 75%"></div>
                        </div>
                    </div>
                    <div class="contextual-progress">
                        <div class="clearfix">
                            <div class="progress-title">UX Design</div>
                            <div class="progress-percentage">8/24</div>
                        </div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-orange" style="width: 33.3%"></div>
                        </div>
                    </div>
                    <div class="contextual-progress">
                        <div class="clearfix">
                            <div class="progress-title">Frontend Development</div>
                            <div class="progress-percentage">8/40</div>
                        </div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-purple" style="width: 20%"></div>
                        </div>
                    </div>
                    <div class="contextual-progress m0">
                        <div class="clearfix">
                            <div class="progress-title">Backend Development</div>
                            <div class="progress-percentage">24/48</div>
                        </div>
                        <div class="progress">
                            <div class="progress-bar progress-bar-danger" style="width: 50%"></div>
                        </div>
                    </div>
                    <a href="#" class="more">See All</a>
                </div>
            </div>
        </div>

        <div class="widget">
            <div class="widget-heading">
                <a href="javascript:;" data-toggle="collapse" data-target="#widget-contact"><h4>Contacts</h4></a>
            </div>
            <div id="widget-contact" class="collapse in">
                <div class="widget-body">
                    <ul class="contact-list">
                        <li id="contact-1">
                            <a href="javascript:;"><img src="assets/demo/avatar/avatar_02.png" alt=""><span>Jeremy Potter</span></a>
                            <!-- <div class="contact-card contactdetails" data-child-of="contact-1">
                                <div class="avatar">
                                    <img src="assets/demo/avatar/avatar_11.png" class="img-responsive img-circle">
                                </div>
                                <span class="contact-name">Jeremy Potter</span>
                                <span class="contact-status">Client Representative</span>
                                <ul class="details">
                                    <li><a href="#"><i class="fa fa-envelope-o"></i>&nbsp;p.bateman@gmail.com</a></li>
                                    <li><i class="fa fa-phone"></i>&nbsp;+1 234 567 890</li>
                                    <li><i class="fa fa-map-marker"></i>&nbsp;Hollywood Hills, California</li>
                                </ul>
                            </div> -->
                        </li>
                        <li id="contact-2">
                            <a href="javascript:;"><img src="assets/demo/avatar/avatar_07.png" alt=""><span>David Tennant</span></a>
                            <!-- <div class="contact-card contactdetails" data-child-of="contact-2">
                                <div class="avatar">
                                    <img src="assets/demo/avatar/avatar_11.png" class="img-responsive img-circle">
                                </div>
                                <span class="contact-name">David Tennant</span>
                                <span class="contact-status">Client Representative</span>
                                <ul class="details">
                                    <li><a href="#"><i class="fa fa-envelope-o"></i>&nbsp;p.bateman@gmail.com</a></li>
                                    <li><i class="fa fa-phone"></i>&nbsp;+1 234 567 890</li>
                                    <li><i class="fa fa-map-marker"></i>&nbsp;Hollywood Hills, California</li>
                                </ul>
                            </div> -->
                        </li>
                        <li id="contact-3">
                            <a href="javascript:;"><img src="assets/demo/avatar/avatar_03.png" alt=""><span>Anna Johansson</span></a>
                            <!-- <div class="contact-card contactdetails" data-child-of="contact-3">
                                <div class="avatar">
                                    <img src="assets/demo/avatar/avatar_11.png" class="img-responsive img-circle">
                                </div>
                                <span class="contact-name">Anna Johansson</span>
                                <span class="contact-status">Client Representative</span>
                                <ul class="details">
                                    <li><a href="#"><i class="fa fa-envelope-o"></i>&nbsp;p.bateman@gmail.com</a></li>
                                    <li><i class="fa fa-phone"></i>&nbsp;+1 234 567 890</li>
                                    <li><i class="fa fa-map-marker"></i>&nbsp;Hollywood Hills, California</li>
                                </ul>
                            </div> -->
                        </li>
                        <li id="contact-4">
                            <a href="javascript:;"><img src="assets/demo/avatar/avatar_09.png" alt=""><span>Alan Doyle</span></a>
                            <!-- <div class="contact-card contactdetails" data-child-of="contact-4">
                                <div class="avatar">
                                    <img src="assets/demo/avatar/avatar_11.png" class="img-responsive img-circle">
                                </div>
                                <span class="contact-name">Alan Doyle</span>
                                <span class="contact-status">Client Representative</span>
                                <ul class="details">
                                    <li><a href="#"><i class="fa fa-envelope-o"></i>&nbsp;p.bateman@gmail.com</a></li>
                                    <li><i class="fa fa-phone"></i>&nbsp;+1 234 567 890</li>
                                    <li><i class="fa fa-map-marker"></i>&nbsp;Hollywood Hills, California</li>
                                </ul>
                            </div> -->
                        </li>
                        <li id="contact-5">
                            <a href="javascript:;"><img src="assets/demo/avatar/avatar_05.png" alt=""><span>Simon Corbett</span></a>
                            <!-- <div class="contact-card contactdetails" data-child-of="contact-5">
                                <div class="avatar">
                                    <img src="assets/demo/avatar/avatar_11.png" class="img-responsive img-circle">
                                </div>
                                <span class="contact-name">Simon Corbett</span>
                                <span class="contact-status">Client Representative</span>
                                <ul class="details">
                                    <li><a href="#"><i class="fa fa-envelope-o"></i>&nbsp;p.bateman@gmail.com</a></li>
                                    <li><i class="fa fa-phone"></i>&nbsp;+1 234 567 890</li>
                                    <li><i class="fa fa-map-marker"></i>&nbsp;Hollywood Hills, California</li>
                                </ul>
                            </div> -->
                        </li>
                        <li id="contact-6">
                            <a href="javascript:;"><img src="assets/demo/avatar/avatar_01.png" alt=""><span>Polly Paton</span></a>
                            <!-- <div class="contact-card contactdetails" data-child-of="contact-6">
                                <div class="avatar">
                                    <img src="assets/demo/avatar/avatar_11.png" class="img-responsive img-circle">
                                </div>
                                <span class="contact-name">Polly Paton</span>
                                <span class="contact-status">Client Representative</span>
                                <ul class="details">
                                    <li><a href="#"><i class="fa fa-envelope-o"></i>&nbsp;p.bateman@gmail.com</a></li>
                                    <li><i class="fa fa-phone"></i>&nbsp;+1 234 567 890</li>
                                    <li><i class="fa fa-map-marker"></i>&nbsp;Hollywood Hills, California</li>
                                </ul>
                            </div> -->
                        </li>
                    </ul>
                    <a href="#" class="more">See All</a>
                </div>
            </div>
        </div>
    </div>
</div>
        </div>

    <!-- Switcher -->
    <div class="demo-options">
        <div class="demo-options-icon"><i class="fa fa-spin fa-fw fa-smile-o"></i></div>
        <div class="demo-heading">Demo Settings</div>

        <div class="demo-body">
            <div class="tabular">
                <div class="tabular-row">
                    <div class="tabular-cell">Fixed Header</div>
                    <div class="tabular-cell demo-switches"><input class="bootstrap-switch" type="checkbox" checked data-size="mini" data-on-color="success" data-off-color="default" name="demo-fixedheader" data-on-text="I" data-off-text="O"></div>
                </div>
                <div class="tabular-row">
                    <div class="tabular-cell">Boxed Layout</div>
                    <div class="tabular-cell demo-switches"><input class="bootstrap-switch" type="checkbox" data-size="mini" data-on-color="success" data-off-color="default" name="demo-boxedlayout" data-on-text="I" data-off-text="O"></div>
                </div>
                <div class="tabular-row">
                    <div class="tabular-cell">Collapse Leftbar</div>
                    <div class="tabular-cell demo-switches"><input class="bootstrap-switch" type="checkbox" data-size="mini" data-on-color="success" data-off-color="default" name="demo-collapseleftbar" data-on-text="I" data-off-text="O"></div>
                </div>
                <div class="tabular-row">
                    <div class="tabular-cell">Collapse Rightbar</div>
                    <div class="tabular-cell demo-switches"><input class="bootstrap-switch" type="checkbox" checked data-size="mini" data-on-color="success" data-off-color="default" name="demo-collapserightbar" data-on-text="I" data-off-text="O"></div>
                </div>
                <div class="tabular-row hide" id="demo-horizicon">
                    <div class="tabular-cell">Horizontal Icons</div>
                    <div class="tabular-cell demo-switches"><input class="bootstrap-switch" type="checkbox" checked data-size="mini" data-on-color="primary" data-off-color="warning" data-on-text="S" data-off-text="L" name="demo-horizicons" ></div>
                </div>
            </div>

        </div>

        <div class="demo-body">
            <div class="option-title">Header Colors</div>
            <ul id="demo-header-color" class="demo-color-list">
                <li><span class="demo-white"></span></li>
                <li><span class="demo-black"></span></li>
                <li><span class="demo-midnightblue"></span></li>
                <li><span class="demo-primary"></span></li>
                <li><span class="demo-info"></span></li>
                <li><span class="demo-alizarin"></span></li>
                <li><span class="demo-green"></span></li>
                <li><span class="demo-violet"></span></li>                
                <li><span class="demo-indigo"></span></li> 
            </ul>
        </div>

        <div class="demo-body">
            <div class="option-title">Sidebar Colors</div>
            <ul id="demo-sidebar-color" class="demo-color-list">
                <li><span class="demo-white"></span></li>
                <li><span class="demo-black"></span></li>
                <li><span class="demo-midnightblue"></span></li>
                <li><span class="demo-primary"></span></li>
                <li><span class="demo-info"></span></li>
                <li><span class="demo-alizarin"></span></li>
                <li><span class="demo-green"></span></li>
                <li><span class="demo-violet"></span></li>                
                <li><span class="demo-indigo"></span></li> 
            </ul>
        </div>

        <div class="demo-body hide" id="demo-boxes">
            <div class="option-title">Boxed Layout Options</div>
            <ul id="demo-boxed-bg" class="demo-color-list">
                <li><span class="pattern-brickwall"></span></li>
                <li><span class="pattern-dark-stripes"></span></li>
                <li><span class="pattern-rockywall"></span></li>
                <li><span class="pattern-subtle-carbon"></span></li>
                <li><span class="pattern-tweed"></span></li>
                <li><span class="pattern-vertical-cloth"></span></li>
                <li><span class="pattern-grey_wash_wall"></span></li>
                <li><span class="pattern-pw_maze_black"></span></li>
                <li><span class="patther-wild_oliva"></span></li>
                <li><span class="pattern-stressed_linen"></span></li>
                <li><span class="pattern-sos"></span></li>
            </ul>
        </div>

    </div>
<!-- /Switcher -->
    <!-- Load site level scripts -->

<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> -->

<script src="assets/js/jquery-1.10.2.min.js"></script> 							<!-- Load jQuery -->
<script src="assets/js/jqueryui-1.9.2.min.js"></script> 							<!-- Load jQueryUI -->

<script src="assets/js/bootstrap.min.js"></script> 								<!-- Load Bootstrap -->


<script src="assets/plugins/easypiechart/jquery.easypiechart.js"></script> 		<!-- EasyPieChart-->
<script src="assets/plugins/sparklines/jquery.sparklines.min.js"></script>  		<!-- Sparkline -->
<script src="assets/plugins/jstree/dist/jstree.min.js"></script>  				<!-- jsTree -->

<script src="assets/plugins/codeprettifier/prettify.js"></script> 				<!-- Code Prettifier  -->
<script src="assets/plugins/bootstrap-switch/bootstrap-switch.js"></script> 		<!-- Swith/Toggle Button -->

<script src="assets/plugins/bootstrap-tabdrop/js/bootstrap-tabdrop.js"></script>  <!-- Bootstrap Tabdrop -->

<script src="assets/plugins/iCheck/icheck.min.js"></script>     					<!-- iCheck -->

<script src="assets/js/enquire.min.js"></script> 									<!-- Enquire for Responsiveness -->

<script src="assets/plugins/bootbox/bootbox.js"></script>							<!-- Bootbox -->

<script src="assets/plugins/simpleWeather/jquery.simpleWeather.min.js"></script> <!-- Weather plugin-->

<script src="assets/plugins/nanoScroller/js/jquery.nanoscroller.min.js"></script> <!-- nano scroller -->

<script src="assets/plugins/jquery-mousewheel/jquery.mousewheel.min.js"></script> 	<!-- Mousewheel support needed for jScrollPane -->

<script src="assets/js/application.js"></script>
<script src="assets/demo/demo.js"></script>
<script src="assets/demo/demo-switcher.js"></script>

<!-- End loading site level scripts -->

    <!-- Load page level scripts-->
    

    <!-- End loading page level scripts-->
    

    </body>
</html>